<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" href="./Logo.jpg" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>茶树认领 - 寻香</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            font-family: 'Arial', '微软雅黑', sans-serif;
            background: var(--light-bg);
            margin: 0;
            padding-top: 80px;
            color: var(--text-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            color: var(--primary-color);
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .header p {
            color: var(--text-color);
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .tea-tree-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .tea-tree-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .tea-tree-card:hover {
            transform: translateY(-10px);
        }
        
        .tree-image {
            height: 200px;
            overflow: hidden;
        }
        
        .tree-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .tea-tree-card:hover .tree-image img {
            transform: scale(1.05);
        }
        
        .tree-info {
            padding: 20px;
        }
        
        .tree-info h3 {
            color: var(--primary-color);
            margin-top: 0;
            font-size: 1.5rem;
        }
        
        .tree-info p {
            margin: 10px 0;
            line-height: 1.5;
        }
        
        .tree-location {
            display: flex;
            align-items: center;
            margin: 10px 0;
            color: #666;
        }
        
        .tree-location i {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .tree-age {
            display: flex;
            align-items: center;
            margin: 10px 0;
            color: #666;
        }
        
        .tree-age i {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .tree-price {
            font-weight: bold;
            color: var(--accent-color);
            font-size: 1.2rem;
            margin: 15px 0;
        }
        
        .tree-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .adopt-btn, .my-tree-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .adopt-btn {
            background: var(--primary-color);
            color: white;
            flex-grow: 1;
            margin-right: 10px;
        }
        
        .adopt-btn:hover {
            background: #1e4a1e;
        }
        
        .my-tree-btn {
            background: var(--accent-color);
            color: white;
        }
        
        .my-tree-btn:hover {
            background: #c69a47;
        }
        
        .section-title {
            color: var(--primary-color);
            position: relative;
            padding-bottom: 10px;
            margin: 40px 0 20px;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary-color);
        }
        
        .benefits {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin: 50px 0;
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        .benefit-item {
            text-align: center;
            padding: 20px;
        }
        
        .benefit-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        .benefit-item h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .faq {
            margin: 50px 0;
        }
        
        .faq-item {
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .faq-question {
            padding: 15px 20px;
            background: #f9f9f9;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: white;
        }
        
        .faq-answer.active {
            padding: 15px 20px;
            max-height: 500px;
        }
        
        .faq-question::after {
            content: '+';
            font-size: 1.5rem;
        }
        
        .faq-question.active::after {
            content: '-';
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="nav-bar">
        <a href="menu.html" class="nav-logo">寻香</a>
        <div class="nav-links">
            <a href="menu.html" class="nav-link">首页</a>
            <a href="booking.html" class="nav-link">预约体验</a>
            <a href="teafound.html" class="nav-link">茶树认领</a>
            <a href="user-auth.html" class="nav-link" id="authLink">登录/注册</a>
            <a href="#" class="nav-link" id="logoutLink" style="display: none;">退出登录</a>
        </div>
    </nav>


    <div class="container">
        <div class="header">
            <h1>认领您的专属茶树</h1>
            <p>通过认领茶树，您不仅能享受专属于您的高品质茶叶，还能参与到茶树的成长过程，体验茶从树到杯的完整旅程。</p>
            <button class="my-tree-btn" id="viewMyTreeBtn" style="margin-top: 20px; padding: 15px 30px; font-size: 1.1rem;">
                <i class="fas fa-tree"></i> 查看我的茶树
            </button>
        </div>

        <h2 class="section-title">可供认领的茶树</h2>
        <div class="tea-tree-grid">
            <!-- 茶树卡片1 -->
            <div class="tea-tree-card">
                <div class="tree-image">
                    <img src="./images/龙井.jpg" alt="西湖龙井茶树">
                </div>
                <div class="tree-info">
                    <h3>西湖龙井茶树</h3>
                    <div class="tree-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>浙江省杭州市西湖区狮峰山</span>
                    </div>
                    <div class="tree-age">
                        <i class="fas fa-calendar-alt"></i>
                        <span>树龄: 15年</span>
                    </div>
                    <p>西湖龙井是中国十大名茶之一，产于杭州西湖周围群山，具有"色绿、香郁、味甘、形美"特点。</p>
                    <div class="tree-price">认领价格: ¥400/年</div>
                    <div class="tree-actions">
                        <button class="adopt-btn" data-tree-id="1" data-tree-type="龙井">立即认领</button>
                    </div>
                </div>
            </div>

            <!-- 茶树卡片2 -->
            <div class="tea-tree-card">
                <div class="tree-image">
                    <img src="./images/铁观音.jpg" alt="安溪铁观音茶树">
                </div>
                <div class="tree-info">
                    <h3>安溪铁观音茶树</h3>
                    <div class="tree-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>福建省泉州市安溪县</span>
                    </div>
                    <div class="tree-age">
                        <i class="fas fa-calendar-alt"></i>
                        <span>树龄: 20年</span>
                    </div>
                    <p>铁观音是中国著名乌龙茶之一，具有"观音韵、兰花香"的特点，汤色金黄，滋味醇厚。</p>
                    <div class="tree-price">认领价格: ¥500/年</div>
                    <div class="tree-actions">
                        <button class="adopt-btn" data-tree-id="2" data-tree-type="铁观音">立即认领</button>
                    </div>
                </div>
            </div>

            <!-- 茶树卡片3 -->
            <div class="tea-tree-card">
                <div class="tree-image">
                    <img src="./images/普洱.jpg" alt="云南普洱茶树">
                </div>
                <div class="tree-info">
                    <h3>云南普洱茶树</h3>
                    <div class="tree-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>云南省西双版纳州勐海县</span>
                    </div>
                    <div class="tree-age">
                        <i class="fas fa-calendar-alt"></i>
                        <span>树龄: 30年</span>
                    </div>
                    <p>普洱茶是以云南大叶种晒青毛茶为原料制成，越陈越香，具有独特的陈香和药理保健作用。</p>
                    <div class="tree-price">认领价格: ¥600/年</div>
                    <div class="tree-actions">
                        <button class="adopt-btn" data-tree-id="3" data-tree-type="普洱">立即认领</button>
                    </div>
                </div>
            </div>
            </div>

        <div class="benefits">
            <h2 class="section-title">认领茶树的好处</h2>
            <div class="benefits-grid">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>专属茶叶</h3>
                    <p>每年收到来自您认领茶树的新鲜茶叶，品质有保障。</p>
                </div>
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h3>茶树认领证书</h3>
                    <p>获得专属茶树认领证书，标注茶树信息和认领期限。</p>
                </div>
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <h3>茶树状态更新</h3>
                    <p>定期收到茶树生长状态图片和视频更新。</p>
                </div>
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-plane"></i>
                    </div>
                    <h3>免费茶园游览</h3>
                    <p>认领期内可免费参观茶园，亲自体验采茶乐趣。</p>
                </div>
            </div>
    </div>

        <div class="faq">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-item">
                <div class="faq-question">认领茶树后，我能得到多少茶叶？</div>
                <div class="faq-answer">
                    <p>根据不同茶树品种和年龄，每年可获得约500-1000克的成品茶。西湖龙井每年约500克，安溪铁观音每年约800克，云南普洱每年约1000克。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">茶叶如何配送？</div>
                <div class="faq-answer">
                    <p>采摘后，茶叶会经过精心处理和包装，通过顺丰快递送到您手中。包装上会注明您的专属茶树编号。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">认领期满后如何续约？</div>
                <div class="faq-answer">
                    <p>认领期满前一个月，我们会通过邮件和短信提醒您。您可以登录个人账户选择是否续约，续约用户将享受优惠价格。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">能否参与茶叶采摘？</div>
                <div class="faq-answer">
                    <p>当然可以！我们会在茶叶采摘季节提前通知您，您可以预约时间亲自来体验采茶乐趣。同时，我们也会为您准备茶艺体验活动。</p>
                </div>
            </div>
        </div>
    </div>

    <script src="common.js"></script>
    <script>
        // 检查用户登录状态
        const currentUser = JSON.parse(localStorage.getItem('currentUser'));
        const authLink = document.getElementById('authLink');
        const logoutLink = document.getElementById('logoutLink');
        
        if (currentUser) {
            authLink.textContent = currentUser.username || '个人中心';
            authLink.href = '#';
            logoutLink.style.display = 'inline-block';
        }
        
        // 退出登录功能
        logoutLink.addEventListener('click', function(e) {
            e.preventDefault();
            localStorage.removeItem('currentUser');
            alert('您已成功退出登录');
            window.location.href = 'menu.html';
        });
        
        // FAQ 交互
        const faqQuestions = document.querySelectorAll('.faq-question');
        faqQuestions.forEach(question => {
            question.addEventListener('click', () => {
                question.classList.toggle('active');
                const answer = question.nextElementSibling;
                answer.classList.toggle('active');
            });
        });
        
        // 认领茶树功能
        const adoptButtons = document.querySelectorAll('.adopt-btn');
        adoptButtons.forEach(button => {
            button.addEventListener('click', function() {
                if (!currentUser) {
                    alert('请先登录后再认领茶树！');
                    window.location.href = 'user-auth.html';
                    return;
                }
                
                const treeId = this.getAttribute('data-tree-id');
                const treeType = this.getAttribute('data-tree-type');
                
                // 获取或初始化用户数据
                const users = JSON.parse(localStorage.getItem('users')) || {};
                const user = users[currentUser.email];
                
                if (!user) {
                    alert('用户数据错误，请重新登录');
                    return;
                }
                
                // 初始化用户的茶树数据
                if (!user.adoptedTrees) {
                    user.adoptedTrees = [];
                }
                
                // 检查是否已经认领过这棵树
                const alreadyAdopted = user.adoptedTrees.some(tree => tree.id === treeId);
                
                if (alreadyAdopted) {
                    alert('您已经认领过这棵茶树了！');
                    return;
                }
                
                // 添加新认领的茶树
                user.adoptedTrees.push({
                    id: treeId,
                    type: treeType,
                    adoptDate: new Date().toISOString(),
                    expireDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString()
                });
                
                // 赋予初始经验值
                if (!user.teaTree) {
                    user.teaTree = {
                        level: 1,
                        experience: 0,
                        type: treeType,
                        lastLogin: new Date().toDateString(),
                        totalExperience: 0  // 添加累计经验值字段
                    };
                }
                
                // 认领奖励
                user.teaTree.experience += 50;
                user.teaTree.totalExperience += 50;  // 更新累计经验值
                
                // 检查是否升级
                if (user.teaTree.experience >= 100) {
                    user.teaTree.level += 1;
                    user.teaTree.experience -= 100;
                    // 不需要减少totalExperience，因为它是累计值
                }
                
                // 保存用户数据
                users[currentUser.email] = user;
                localStorage.setItem('users', JSON.stringify(users));
                
                // 提示认领成功
                alert(`恭喜您成功认领了${treeType}茶树！获得50点经验值！`);
                
                // 认领成功后的样式变化
                this.textContent = '已认领';
                this.style.background = '#888';
                this.disabled = true;
            });
        });
        
        // 我的茶树按钮功能
        document.getElementById('viewMyTreeBtn').addEventListener('click', function() {
            if (!currentUser) {
                alert('请先登录后查看您的茶树！');
                window.location.href = 'user-auth.html';
                return;
            }
            window.location.href = 'tea-tree.html';
        });
        
        // 确保AI助手功能正常
        const aiToggle = document.querySelector('.ai-toggle');
        const aiChat = document.querySelector('.ai-chat');
        
        aiToggle.addEventListener('click', function() {
            console.log('AI助手被点击');
            if (aiChat.style.display === 'flex' || aiChat.style.display === 'block') {
                aiChat.style.display = 'none';
            } else {
                aiChat.style.display = 'flex';
            }
        });
        
        document.addEventListener('DOMContentLoaded', function() {
            
            // 发送消息功能
            const chatInput = document.querySelector('.chat-input input');
            const chatButton = document.querySelector('.chat-input button');
            const chatMessages = document.querySelector('.chat-messages');

            function sendMessage() {
                const message = chatInput.value.trim();
                if (message) {
                    // 添加用户消息
                    const userMsg = document.createElement('div');
                    userMsg.className = 'message user';
                    userMsg.textContent = message;
                    chatMessages.appendChild(userMsg);
                    
                    // 清空输入框
                    chatInput.value = '';
                    
                    // 自动回复
                    setTimeout(() => {
                        const botMsg = document.createElement('div');
                        botMsg.className = 'message bot';
                        
                        // 简单的关键词匹配
                        if (message.includes('茶')) {
                            botMsg.textContent = '茶是中国的传统饮品，有很多种类，如龙井、普洱、铁观音等，每种都有其独特的风味。';
                        } else if (message.includes('预约') || message.includes('订购')) {
                            botMsg.textContent = '您可以通过我们的预约页面选择心仪的茶艺体验时间和项目。';
                        } else if (message.includes('价格')) {
                            botMsg.textContent = '我们有不同的体验套餐，价格从98元到298元不等，具体请查看预约页面。';
                        } else if (message.includes('茶树') || message.includes('认领')) {
                            botMsg.textContent = '我们提供茶树认领服务，您可以认领自己的茶树，获得专属茶叶，并获得相应的经验值和奖励。';
                        } else {
                            botMsg.textContent = '抱歉，我不太理解您的问题。您可以询问关于茶文化、预约体验、茶树认领或者价格等问题。';
                        }
                        
                        chatMessages.appendChild(botMsg);
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                    }, 500);
                }
            }

            chatButton.addEventListener('click', sendMessage);
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
    </script>
    <!-- 引入公共JS文件 -->
    <script src="common.js"></script>
</body>
</html>